<script setup lang="ts">
import { CloseBold } from "@element-plus/icons-vue";
import { getCurrentWindow } from "@tauri-apps/api/window";

// 关闭当前窗口
const onClose = async () => {
  getCurrentWindow().close();
};
</script>

<template>
  <div class="nav-bar">
    <div class="logo horzontal-center-layout">智慧校园网</div>
    <span class="flex-1"></span>
    <div class="sys-btn-bar">
      <div class="nav-btn" @click="onClose">
        <el-icon style="width: 18px; height: 18px;">
          <CloseBold />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 高级和现代的导航栏样式 */
/* 高级和现代的导航栏样式 */
/* 高级和现代的导航栏样式 */
.nav-bar {
  -webkit-app-region: drag;
  display: flex;
  width: 100%;
  height: 40px;
  background-color: transparent; /* 设置背景为透明 */
  color: rgb(255, 255, 255);
  justify-content: flex-start;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影，提升层次感 */


  /* Logo样式 */
    .logo {
    font-size: 38px; /* 增加字体大小 */
    font-weight: bold;
    color: #cf7cfc;
    letter-spacing: 1px;
    cursor: pointer;
    flex: 1; /* 使 Logo 在剩余空间中占据空间 */
    text-align: center; /* 确保Logo居中 */
    padding-left: 0; /* 移除左侧内边距 */
  
    }
  .sys-btn-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .nav-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0px 10px;
    font-size: 20px;
    color: #ff7474;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.2s ease; /* 添加过渡效果 */

    &:hover {
      background-color: #ff0000; /* 添加悬停时背景颜色变化 */
      transform: scale(1.1); /* 按钮放大效果 */
    }

    &:active {
      transform: scale(1); /* 鼠标点击时恢复原状态 */
    }

    el-icon {
      color: inherit;
      transition: color 0.3s ease;
    }

    &:hover el-icon {
      color: #fff;
    }
  }
}

</style>
